<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <title>招聘信息</title>
</head>
<body>
<div class="container" id="app">
  <div class="row">
    <div class="col-sm-12">
      <h4>全部招聘信息 ({{ page.meta.count || '加载中..' }})</h4>
    </div>
    <hr>

    <div class="col-sm-12 col-md-6 col-lg-4" v-for="item in page.item">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h5 class="media-heading">
            {{ item.company_name }}
          </h5>
        </div>
        <div class="panel-body">
          <div class="media">
            <div class="media-left">
              <a href="javascript:;">
                <img class="media-object" :src="item.logo" :alt="item.company_name">
              </a>
            </div>
            <a :href="item.url" target="_blank" class="media-body">
              <p>时间: {{ item.meet_day }}  {{ item.meet_time }}</p>
              <p>地点: {{ item.school_name }} {{ item.address }}</p>

              <div class="btn btn-info btn-xs">{{ item.city_name || '暂无' }}</div>
              <div class="btn btn-success btn-xs">{{ item.company_property }}</div>
              <div class="btn btn-primary btn-xs">{{ item.industry_category }}</div>

            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4">
      <nav aria-label="Page navigation  pagination-sm">
        <ul class="pagination">
          <li>
            <a href="javascript:;" aria-label="Previous" @click="next(false)">
              <span aria-hidden="true" :disabled="page.meta.page === 1">&laquo; 上一页</span>
            </a>
          </li>
          <li><a href="javascript:;">{{ page.meta.page }}</a></li>
          <li>
            <a href="javascript:;" aria-label="Next" @click="next(true)">
              <span aria-hidden="true">下一页 &raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>

    <div class="col-sm-12">
      <div class="well well-sm">小DEMO</div>
    </div>
  </div>
</div>
<style>
  .media-object {
    width: 64px;
    height: 64px;
  }
  .btn {
    margin-top: 10px;
  }
</style>
<script>
  var baseURL = 'http://util.bigpar.cn/api'
  var app = new Vue({
    el: '#app',
    data: {
      page: {
        meta: {
          count: null,
          limit: 10,
          page: 1,
        },
        item: [],
      }
    },
    methods: {
      next: function(isNext) {
        if (isNext) {
          this.page.meta.page += 1
        } else {
          this.page.meta.page -= 1
        }
        this.loadDate()
      },
      loadDate: function() {
        var vm = this
        $.get(baseURL + '?page=' + this.page.meta.page + '&sort=meet_day&by=-1', function(res){
          vm.page = res
        })
      }
    },
    created: function() {
      this.loadDate()
    }
  })
</script>
</body>
</html>